<template>
  <Panel title="路网流量" class="flow" v-bind="$attrs">
    <div class="flow-overview">
      <div class="flow-icon"></div>

      <div class="flow-statistical">
        <span class="flow-title">{{ flowTitle }}</span>
        <div class="flow-specific">
          <span class="number total">{{ total }}</span>
          <div class="contrast">
            <SequentialSame :data="sameData"></SequentialSame>
          </div>
        </div>
      </div>
    </div>

    <div class="flow-chart">
      <LineChart ref="lineChart" :seriesData="seriesData" :title="title" :typeArr="typeArr" :xDate="xDate" />
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'Flow'
}
</script>

<script setup>
/**
 * @desc 路网流量(一级)
 * @auther 阳坤
 * @date 2022/10/21
 * **/

import SequentialSame from '../../components/sequential-same/index.vue'
import LineChart from '../../components/charts/ShadowLine.vue'
import Panel from '../../components/panel'
import flowApi from '../../api/flow.js'
import { message } from 'ant-design-vue'
import useDefaultEmits from '@/hooks/useDefaultEmits'
import useWatchStore from '@/hooks/useWatchStore'
import store from '@/store'
import { ref, defineProps, onBeforeUnmount, computed } from 'vue'
import { get } from '@/utils'

const props = defineProps({
  routeName: {
    // 该组件所属路由名
    type: [String],
    default: ''
  }
})
const orgId = computed(() => (store.state.user.userInfo.orgInfos ? store.state.user.userInfo.orgInfos[0].orgId : ''))

// 是否是省级账号
const isProvince = computed(() => store.state.config.isProvince)

// 路网流量标题
const flowTitle = ref('昨日平均断面流量') // 昨日出口累计流量

// echarts 标题名称、分类、x轴数据、折线数据
const title = ref('24小时分时走势')
const typeArr = ref(['昨日', '前日'])
const xDate = ref([])
const seriesData = ref([
  {
    name: '昨日',
    gradientColor: [
      { offset: 0, color: 'rgb(183, 206, 250)' },
      { offset: 1, color: 'rgb(210, 229, 250)' }
    ],
    color: '#00B5CA',
    data: []
  },
  {
    name: '前日',
    gradientColor: [
      { offset: 0, color: 'rgb(153, 203, 245)' },
      { offset: 1, color: 'rgb(203, 226, 249)' }
    ],
    color: '#4287FE',
    data: []
  }
])

// 折线图ref标签
const lineChart = ref()

// 流量总计
const total = ref(0)

// 同环比
const sameData = ref({})

// 定时切换高速、公路数据
const dateAverageTimer = ref(null)

/**
 * 组件销毁前
 */
onBeforeUnmount(() => {
  // 清除定时器
  if (dateAverageTimer.value) {
    clearInterval(dateAverageTimer.value)
    dateAverageTimer.value = null
  }
})

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: isProvince.value ? '' : argParams.areaCode,
    orgId: orgId.value
  }
  // 清除定时器
  if (dateAverageTimer.value) clearInterval(dateAverageTimer.value)
  flowApi
    .getFlowStatistic(params)
    .then(res => {
      if (res.data) {
        // 时间轴
        xDate.value = res.data.dateList
        // 2公路 1高速 空全路网
        if (argParams.roadType == 1) setHighSpeedValue(res.data)
        else setHighwayValue(res.data)

        // 当处于全路网下时,定时器轮播高速公路数据
        if ([1, 2].includes(argParams.roadType)) {
          if (dateAverageTimer.value) clearInterval(dateAverageTimer.value)
          dateAverageTimer.value = null
        } else {
          let index = 1
          dateAverageTimer.value = setInterval(() => {
            // 重新渲染普通公路平均断面流量
            if (index == 1) {
              setHighSpeedValue(res.data)
            } else if (index == 2) {
              setHighwayValue(res.data)
              index = 0
            }
            index++
          }, 1000 * 20)
        }
      } else {
        message.error(`路网流量数据请求异常！`)
      }
    })
    .catch(() => {
      message.error(`数据获取失败！`)
    })
}
/**
 * 获取公路断面统计数据
 */
function getGlFlowAverage() {
  flowApi
    .getDateAverageTrafficFlow()
    .then(res => {
      total.value = parseInt(get(res, 'data.yesterdayFlow')) || 0
    })
    .catch(e => {
      console.warn('获取公路断面统计数据 err', e)
    })
}

/**
 * 赋值高速数据
 */
const setHighSpeedValue = data => {
  flowTitle.value = '昨日出口累计流量(万辆)'
  // 累计流量
  total.value = data.gsExitFlow
  // 同环比
  sameData.value = {
    ring: data.gsLwFlowHb,
    same: data.gsLwFlowTb
  }
  // 折线数据
  seriesData.value[0].data = data.gsYesterdayRealTimeList
  seriesData.value[1].data = data.gsBeforeDayRealTimeList
}
/**
 * 赋值公路数据
 */
const setHighwayValue = data => {
  flowTitle.value = '昨日平均断面流量'
  // 累计流量
  total.value = data.glFlow
  // 同环比
  sameData.value = {
    ring: data.glLwFlowHb,
    same: data.glLwFlowTb
  }
  // 折线数据
  seriesData.value[0].data = data.glYesterdayRealTimeList
  seriesData.value[1].data = data.glBeforeDayRealTimeLisD
  getGlFlowAverage()
}

/**
 * 触发点击emit事件
 */
useDefaultEmits()

/**
 * 初始化以及监听地市编码跟路网类型
 */
useWatchStore(getData)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow {
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  .flow-overview {
    display: flex;
    height: 54px;
    margin-bottom: 20px;

    .flow-icon {
      width: 54px;
      height: 100%;
      margin: 0 6px 0 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url(../../assets/images/flow/out-car.png);
      background-size: 100% 100%;
    }

    .flow-statistical {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 2px;

      .flow-title {
        color: #333333;
        font-weight: 600;
      }

      .flow-specific {
        display: flex;
        justify-content: space-between;

        .total {
          font-size: 36px;
          font-weight: 700;
          color: @primary-color;
          line-height: 24px;
        }

        .contrast {
          flex: 1;
          display: flex;
          align-items: center;

          .sequential-same {
            justify-content: flex-end;

            :deep(.sequential) {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .flow-chart {
    flex: 1;
  }
}
</style>
